<template>
  <div class="tooltip-container">
    <!-- 问号图标 -->
    <van-popover v-model:show="isTooltipVisible" :placement="placement" theme="dark" >
      <div  class="tooltip">
      <slot>
        {{ title }}
      </slot>
    </div>

      
      <template #reference>
    <van-icon
      name="question-o"
      class="question-icon"
    />
 
  </template>
</van-popover>
    <!-- 注解内容 -->
    <!-- <div v-if="isTooltipVisible" class="tooltip">
      {{ title }}
    </div> -->
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { ref, reactive, onMounted, computed } from "vue";
const { locale, t } = useI18n();
const store = useStore();
const props = defineProps({
  title: {
      type: String,
      required: false,
    },
    placement:{
      type:String,
      default:'top'
    }
})
const isTooltipVisible = ref(false)
const toggleTooltip = () => {
      isTooltipVisible.value = !isTooltipVisible.value;
    };

    const showTooltip = () => {
      isTooltipVisible.value = true;
    };

    const hideTooltip = () => {
      isTooltipVisible.value = false;
    };
// 改变法币查询
</script>
<style lang="scss" scoped>
.tooltip-container {
  padding: 0 3px;
  margin-left: 2px;
}
.question-icon {
  cursor: pointer;
  font-size: 16px;
  color: #1989fa;
}

.tooltip {
  // position: absolute;
  // top: 100%;
  // left: 50%;
  // transform: translateX(-50%);
  // margin-top: 8px;
  // padding: 8px;
  // background-color: #333;
  padding: 8px 5px;
  color: #fff;
  // border-radius: 4px;
  // font-size: 14px;
  // white-space: nowrap;
  // z-index: 1000;
}
</style>
  